<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">1</el-col>
      <el-col :span="8">
        <div id="main"></div>
      </el-col>
      <el-col :span="8">
        <div id="myChart"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <router-link to="/addstudent">
        <el-button type="primary" size="mini">
          添加学生
        </el-button>
        </router-link>
      </el-col>
    </el-row>
    <el-row>
      <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="id"
            label="学员id">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="电话">
          </el-table-column>
          <el-table-column
            prop="school"
            label="校区">
          </el-table-column>
          <el-table-column
            prop="grade"
            label="班级">
          </el-table-column>
          <el-table-column
            prop="birthday"
            label="生日">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="showinfo(scope.$index, scope.row)">详情
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-row>
    <el-row>
      <template>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 15, 20, 25]"
            :page-size=size
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
          </el-pagination>
        </div>
      </template>
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'chart',
  data() {
    return {
      chart: null,
      options: {},
      mainoptions: {},
      xAxisData: [],
      seriesData: [],
      resources: [],
      tableData: [],
      currentPage: 1,
      size: 10,
      total: 0
    }
  },
  mounted() {
    this.findCountGroupByDate();
    this.findResource();
    this.findEduStudentByPage();
  },
  methods: {
    findEduStudentByPage() {
      this.$axios.get("/edustudent/findEduStudentByPage/" + this.currentPage + "/" + this.size).then(res => {
        this.tableData = res.data.data.data;
        this.total = res.data.data.total;
        console.log(this.tableData);
      })
    },
    handleSizeChange(val) {
      this.size = val;
      this.findEduStudentByPage();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.findEduStudentByPage();
    },
    showinfo(index, row) {
      this.$router.push("/studentinfo/" + row.id)
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    findResource() {
      this.$axios.get("/edustudent/findResource").then(res => {
        this.resources = res.data.data;
        console.log(this.resources)
        this.initmainoptions();
        this.initmian();
      })
    },
    initmainoptions() {
      this.mainoptions = {
        title: {
          show: true,
          text: '学员招生来源'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 30,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.resources
          }
        ]
      };
    },
    initOptions() {
      this.options = {
        tooltip: {
          trigger: 'item'
        },
        title: {
          show: true,
          text: '本周学员趋势'
        },
        xAxis: {
          type: 'category',
          data: this.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.seriesData,
            type: 'bar'
          }
        ]
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById('myChart'))
      this.chart.setOption(this.options)
    },
    initmian() {
      this.chart = init(document.getElementById('main'))
      this.chart.setOption(this.mainoptions)
    },
    findCountGroupByDate() {
      this.$axios.get("/edustudent/findCountGroupByDate").then(res => {
        if (this.xAxisData.length > 0) {
          this.xAxisData = [];
        }
        if (this.seriesData.length > 0) {
          this.seriesData = [];
        }
        let data = res.data.data;
        for (let datum of data) {
          this.xAxisData.push(datum.addTime)
          this.seriesData.push(datum.count)
        }
        this.initOptions();
        this.initCharts();
      })
    }
  }
}
</script>

<style scoped>
#myChart {
  width: 550px;
  height: 400px;
}

#main {
  width: 550px;
  height: 400px;
}
</style>
